<template>
  <div class="container">
    <!-- body 整体卡片区域 -->
    <el-card shadow="always">
      <!-- 页面上方文字说明 -->
      <div class="explanation_top">
        <div class="explanation">说明：目前支持学科和关键字条件筛选</div>
        <el-button
          type="success"
          icon="el-icon-edit"
          size="small"
          @click="$router.push('new')"
          >新增试题
        </el-button>
      </div>

      <!-- select选择器 -->
      <form class="formSelect">
        <el-form :inline="true" size="small" class="demo-form-inline">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="学科" class="xuekeqi">
                  <el-select
                    v-model="value"
                    placeholder="请选择"
                    @change="changeOn"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>

            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="二级目录" size="small">
                  <el-select v-model="test" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in contents"
                      :key="index"
                      :label="item.directoryName"
                      :value="index"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>

            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="标签" size="small">
                  <el-select v-model="tagList" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in tagLists"
                      :key="index"
                      :label="item.tagName"
                      :value="index"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="关键字" size="small">
                  <el-input
                    placeholder="根据题干搜索"
                    v-model="keywords"
                    class="timubeizhu"
                  >
                  </el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="试题类型">
                  <el-select v-model="ttype" placeholder="请选择">
                    <el-option
                      v-for="item in ttypes"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="难度" size="small" class="nanduqi">
                  <el-select v-model="difficulty" placeholder="请选择">
                    <el-option
                      v-for="item in difficultys"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="方向" size="small">
                  <el-select v-model="orientation" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in orientations"
                      :key="index"
                      :label="item"
                      :value="index"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="录入人" size="small">
                  <el-select v-model="inputUser" placeholder="请选择">
                    <!-- label 渲染的数据 -->
                    <el-option
                      v-for="(item, index) in inputUsers"
                      :key="index"
                      :label="item.username"
                      :value="index"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="题目备注">
                  <el-input v-model="remarks" class="timubeizhu"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="企业简称" size="small">
                  <el-input v-model="shortName" class="timubeizhu"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="城市" size="mini">
                  <el-select
                    v-model="urban"
                    placeholder="请选择"
                    class="citySelectQi"
                    @change="countylevel()"
                  >
                    <el-option
                      v-for="(item, index) in urbans"
                      :key="index"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>

                  <el-select
                    v-model="countylevelCity"
                    size="mini"
                    placeholder="请选择"
                    class="citySelectQi"
                  >
                    <el-option
                      v-for="(item, index) in countylevelCitys"
                      :key="index"
                      :label="item"
                      :value="index"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item>
                  <span class="btnSeaCle">
                    <el-button size="small" @click="qingChu">清除</el-button>
                    <el-button type="primary" @click="search">搜索</el-button>
                  </span>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </form>

      <!-- tab标签页 -->
      <el-tabs v-model="activeName" type="card" @tab-click="tabClicked">
        <el-tab-pane label="全部" name="3"></el-tab-pane>
        <el-tab-pane label="待审核" name="0"></el-tab-pane>
        <el-tab-pane label="已审核" name="1"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
      </el-tabs>

      <!-- 警告栏 -->
      <el-alert
        :title="`数据一共 ${total} 条`"
        type="info"
        :closable="false"
        show-icon
      >
      </el-alert>

      <!-- 表格  -->
      <el-table :data="problem" border style="width: 100%">
        <el-table-column prop="id" label="试题编号" width="150">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="120">
        </el-table-column>
        <el-table-column prop="catalog" label="目录" width="120">
        </el-table-column>
        <el-table-column prop="questionType" label="题型" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType == 1">单选</span>
            <span v-else-if="scope.row.questionType == 2">多选</span>
            <span v-else>简单</span>
          </template>
        </el-table-column>
        <el-table-column label="题干" width="300">
          <template slot-scope="scope">
            <!-- 去除字母标签 -->
            <span v-html="scope.row.question"></span>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="120">
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.difficulty == 1">简单</span>
            <span v-else-if="scope.row.difficulty == 2">一般</span>
            <span v-else>困难</span>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="120">
        </el-table-column>
        <el-table-column prop="chkState" label="审核状态" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.chkState == 0">待审核</span>
            <span v-else-if="scope.row.chkState == 1">通过</span>
            <span v-else>拒绝</span>
          </template>
        </el-table-column>
        <el-table-column prop="chkRemarks" label="审核意见" width="120">
        </el-table-column>
        <el-table-column prop="chkUser" label="审核人" width="120">
        </el-table-column>
        <el-table-column prop="publishState" label="发布状态" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.publishState == 1">上架</span>
            <span v-else-if="scope.row.publishState == 0">下架</span>
            <span v-else>困难</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="230">
          <template slot-scope="scope">
            <el-button
              @click="previsualization(scope.row)"
              type="text"
              size="small"
            >
              预览
            </el-button>

            <el-button
              type="text"
              size="small"
              @click="examine(scope.row)"
              :disabled="scope.row.chkState != 0 ? true : false"
              >审核
            </el-button>

            <el-button
              type="text"
              size="small"
              :disabled="scope.row.publishState != 1 ? true : false"
              @click="modification(scope.row)"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              v-if="scope.row.publishState == 1"
              @click="putaway(scope.row)"
              >下架
            </el-button>
            <el-button
              type="text"
              size="small"
              v-else
              @click="putaway(scope.row)"
              >上架</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="deleteTopic(scope.row)"
              :disabled="scope.row.publishState != 0 ? true : false"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页功能 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

      <!-- 预览弹出框 -->
      <el-dialog
        title="题目预览"
        :visible.sync="dialogVisible"
        width="60%"
        @close="videoC"
      >
        <div class="previewTab">
          <div class="tixing">
            【题型】:
            <span v-if="subjectPreview.questionType == 1">单选</span>
            <span v-if="subjectPreview.questionType == 2">多远</span>
            <span v-if="subjectPreview.questionType == 3">简单</span>
          </div>
          <div class="tixing">
            【编号】:<span v-html="subjectPreview.id"></span>
          </div>
          <div class="tixing">
            【难度】:
            <span v-if="subjectPreview.difficulty == 1">简单</span>
            <span v-if="subjectPreview.difficulty == 2">中等</span>
            <span v-if="subjectPreview.difficulty == 3">困难</span>
          </div>
          <div class="tixing">
            【标签】:<span v-html="subjectPreview.tags"></span>
          </div>
          <div class="tixing">
            【学科】: <span v-html="subjectPreview.subject"></span>
          </div>
          <div class="tixing">
            【目录】: <span v-html="subjectPreview.catalog"></span>
          </div>
          <div class="tixing">
            【方向】:<span v-html="subjectPreview.direction"></span>
          </div>
        </div>
        <hr />

        <div style="padding: 8px 0px">
          【题干】：<span v-html="subjectPreview.question"></span>
        </div>

        <div style="padding: 5px 0px">
          <!-- 可以优化不知道怎么优化 -->
          <span v-if="subjectPreview.questionType == 1">单选</span>
          <span v-if="subjectPreview.questionType == 2">多选</span>
          选项：（以下选中的选项为正确答案）
        </div>

        <div class="radios" v-if="subjectPreview.questionType == '1'">
          <el-radio v-model="radio" label="1" class="radioss">单选项</el-radio>
          <el-radio v-model="radio" label="2" class="radioss">单选项</el-radio>
          <el-radio v-model="radio" label="3" class="radioss">单选项</el-radio>
          <el-radio v-model="radio" label="4" class="radioss">单选项</el-radio>
        </div>

        <div class="checkboxs" v-else-if="subjectPreview.questionType == '2'">
          <el-checkbox label="复选框 A"></el-checkbox>
          <el-checkbox label="复选框 B"></el-checkbox>
          <el-checkbox label="复选框 C"></el-checkbox>
          <el-checkbox label="复选框 D"></el-checkbox>
        </div>
        <div v-else></div>
        <hr />

        <div style="padding: 8px 0px">
          【参考答案】：
          <el-button type="danger" size="small" @click.native="showVideo">
            视频答案预览
          </el-button>
          <div>
            <video
              v-show="isshow"
              :src="subjectPreview.videoURL"
              width="400"
              height="300"
              class="videos"
              preload="auto"
              controls="controls"
            ></video>
          </div>
        </div>
        <hr />

        <div style="padding: 8px 0px">
          【答案解析】：<span v-html="subjectPreview.answer"></span>
        </div>
        <hr />
        <div style="padding: 8px 0px">
          【题目备注】：<span v-html="subjectPreview.remarks"></span>
        </div>
        <span slot="footer" class="dialog-footer">
          <div class="guanbi">
            <el-button @click="videoClose" type="primary">关 闭</el-button>
          </div>
        </span>
      </el-dialog>

      <!-- 题目审核意见 -->
      <el-dialog
        title="题目审核"
        :visible.sync="dialogVisibles"
        width="30%"
        :before-close="canclereview"
      >
        <el-radio v-model="review.chkState" label="1">通过</el-radio>
        <el-radio v-model="review.chkState" label="2">不通过</el-radio>
        <el-input
          type="textarea"
          v-model="review.chkRemarks"
          style="padding-top: 20px"
        ></el-input>
        <span slot="footer" class="dialog-footer">
          <div class="guanbiAudit">
            <el-button @click="canclereview">取 消</el-button>
            <el-button type="primary" @click="titleReview">确 定</el-button>
          </div>
        </span>
      </el-dialog>

      <!-- 上架 -->
      <el-dialog title="提示" :visible.sync="dialogVisibless" width="30%">
        <i class="el-icon-warning" style="font-size: 20px; color: #e6a23c"></i>
        <span v-if="this.shangxiajia.publishState == 1" style="font-size: 16px">
          您确认上架这道题目吗</span
        >
        <span v-else style="font-size: 16px">您确认下架这道题目吗</span>
        <span slot="footer" class="dialog-footer">
          <div class="guanbiAudit">
            <el-button @click="dialogVisibless = false">取 消</el-button>
            <el-button type="primary" @click="jiaAdd">确 定</el-button>
          </div>
        </span>
      </el-dialog>

      <!-- 删除 -->
      <el-dialog title="提示" :visible.sync="dialogVisiblesss" width="30%">
        <i class="el-icon-warning" style="font-size: 20px; color: #e6a23c"></i
        ><span style="font-size: 16px"> 此操作将永久删除该题目, 是否继续?</span>
        <span slot="footer" class="dialog-footer">
          <div class="guanbiAudit">
            <el-button @click="dialogVisiblesss = false">取 消</el-button>
            <el-button type="primary" @click="deleteQuestions">确 定</el-button>
          </div>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>


<script>
import { simple } from "@/api/hmmm/subjects";
// 二级目录
import { list as simplelist } from "@/api/hmmm/directorys";
// 标签列表
import { list as listTag } from "@/api/hmmm/tags";
// 试题类型
import { questionType } from "@/api/hmmm/constants";
// 难度
import { difficulty } from "@/api/hmmm/constants";
// 方向
import { direction } from "@/api/hmmm/constants";
// 录入人
import { list } from "@/api/base/users";
// 所有城市
import { provinces, citys } from "@/api/hmmm/citys";
// 全部题目
import { choice } from "@/api/hmmm/questions";
// 审核意见列表
import { choiceCheck } from "@/api/hmmm/questions";
// 题目上下架
import { choicePublish, auditOpinions } from "@/api/hmmm/questions";
// 删除题目
import { remove } from "@/api/hmmm/questions";
// 精选题库添加和取消
import { choiceAdd } from "@/api/hmmm/questions";
// 过滤器
import filters from "@/filters/index.js";

export default {
  name: "questionsss",
  data() {
    return {
      // 删除试题
      // 删除试题单个
      deteteq: {
        id: "",
      },

      shangxiajia: {
        id: "",
        publishState: "",
      },

      //tab标签切换默认为第一个
      activeName: "3",

      problem: [],

      //select选择器
      options: null,
      value: "",

      contents: [],
      test: "",

      tagLists: [],
      tagList: "",

      ttype: "",
      ttypes: [],

      difficultys: [],
      difficulty: "",

      orientation: "",
      orientations: [],

      inputUsers: [],
      inputUser: "",

      urban: "",
      urbans: [],

      remarks: "",
      shortName: "",
      keywords: "",

      countylevelCity: "",
      countylevelCitys: [],

      test1: "0",
      test2: "1",
      test2: "2",

      //  控制弹出框的隐藏与显示
      dialogVisible: false,
      dialogVisibles: false,
      dialogVisibless: false,
      dialogVisiblesss: false,

      // 科目预览对象
      subjectPreview: [],

      radio: "",

      isshow: false,

      textarea: "",

      editId: "",

      // 审核意见
      // review: {
      //   chkState: null,
      //   chkRemarks: null,
      //   id: "",
      // },
      review:{
        id:null,
        chkState:null,
        chkRemarks:null
      },
      // 搜索按钮
      sousuo: [],

      subjectID: "",

      total: 0,

      queryInfo: {
        page: 1,
        pagesize: 10,
      },

      // 分页按钮
      currentPage4: 1,
    };
  },

  created() {
    this.allthetopic();
    this.urbanso();
    this.countylevel();
    this.discipline();
    this.consumer();
    this.ttypes = questionType;
    this.difficultys = difficulty;
    this.orientations = direction;
  },

  methods: {
    // 学科数据
    async discipline() {
      const { data: data } = await simple();
      this.options = data;
      // console.log(this.options);
    },

    //二级目录 获取当前选择学科 value
    async changeOn(val) {
      this.subjectID = val;
      this.test = ''
      const { data: data } = await simplelist({ subjectID: val });
      this.contents = data.items;

      //标签页
      const { data: tag } = await listTag({ subjectID: val });
      this.tagLists = tag.items;
    },

    // 录入人
    async consumer() {
      const { data: data } = await list();
      this.inputUsers = data.list;
    },

    // 城市
    urbanso() {
      const data = provinces();
      this.urbans = data;
    },

    // 城市下地区
    countylevel() {
      const data = citys(this.urban);
      this.countylevelCitys = data;
    },

    // 点击清除表单数据
    qingChu() {
      this.remarks = "";
      this.ttype = "";
      this.keywords = "";
      this.tagList = "";
      this.test = "";
      this.orientation = "";
      this.difficulty = "";
      this.inputUser = "";
      this.shortName = "";
      this.urban = "";
      this.value = "";
      this.countylevelCity = "";
    },

    // 搜索按钮
    async search(keywords) {
      if (this.subjectID) {
        const { data: data } = await choice({ subjectID: this.subjectID });
        this.problem = data.items;
      } else {
        const { data: data } = await choice({ keyword: this.keywords });
        this.problem = data.items;
      }
    },

    // 全部题目表格
    async allthetopic() {
      const { data: data } = await choice(this.queryInfo);
      this.problem = data.items;
      this.total = data.counts;
    },

    // tab栏
    async tabClicked() {
      // 等于0的话就是tab栏的全部数据
      if (this.activeName === "3") {
        this.allthetopic();
      } else if (this.activeName === "0") {
        const { data: data } = await choice({ chkState: 0 });
        this.problem = data.items;
      } else if (this.activeName === "1") {
        const { data: data } = await choice({ chkState: 1 });
        this.problem = data.items;
      } else if (this.activeName === "2") {
        const { data: data } = await choice({ chkState: 2 });
        this.problem = data.items;
      }
    },

    // 预览窗口
    previsualization(row) {
      this.dialogVisible = true;
      this.subjectPreview = row;
      //  console.log( this.subjectPreview);
    },

    // 审核按钮
    examine(val) {
      this.review.id = val.id;
      this.dialogVisibles = true;
    },

    // 审核弹窗 给后台传数据
    async titleReview() {
      const a = parseInt(this.review.chkState);
      await choiceCheck({
        id: this.review.id,
        chkState: a,
        chkRemarks: this.review.chkRemarks,
      });
      this.allthetopic();
      this.dialogVisibles = false;
    },

    // 修改题目
    modification(val) {
      this.$router.push(`new?id=${val.id}`);
    },

    // 删除按钮
    deleteTopic(val) {
      this.deteteq.id = val.id;
      console.log(this.deteteq.id);
      this.dialogVisiblesss = true;
    },

    // 删除弹窗
    async deleteQuestions() {
      await remove({ id: this.deteteq.id });
      this.dialogVisiblesss = false;
      this.allthetopic();
    },

    // 视频video
    showVideo() {
      if (this.subjectPreview.videoURL !== null) {
        this.isshow = true;
      }
    },

    // 上架题目
    putaway(val) {
      // console.log(val);
      this.shangxiajia.id = val.id;
      this.shangxiajia.publishState = val.publishState;
      this.dialogVisibless = true;
    },

    // 上架的弹出窗确认按钮
    async jiaAdd() {
      if (this.shangxiajia.publishState != 1) {
        this.shangxiajia.publishState = 1;
      } else {
        this.shangxiajia.publishState = 0;
      }
      await choicePublish({
        id: this.shangxiajia.id,
        publishState: this.shangxiajia.publishState,
      });
      this.dialogVisibless = false;
      this.allthetopic();
    },

    // 分页按钮
    // 每页多少条触发
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      this.allthetopic();
    },

    // 单页的数字变化是触发
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage;
      this.allthetopic();
    },

    // 关闭清空
    // closeDialog() {
    //   this.review.chkState = null
    //   this.review.chkRemarks = null
    //   this.dialogVisibles = false
    // },
    canclereview() {
      this.review.chkRemarks = null
       this.dialogVisibles = false
    },
    // 关闭预览窗口停止播放
    videoClose() {
      this.dialogVisible = false;
      this.subjectPreview.videoURL = "";
    },
    videoC() {
      this.subjectPreview.videoURL = "";
    },
  },
};
</script>


<style lang="less" scoped>
.container {
  padding: 0 10px;
  margin: 10px 0;
  .body-style {
    padding: "20px";
    border-radius: 4px;
  }

  .explanation_top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .explanation {
      font-size: 12px;
      color: pink;
    }
  }
  .formSelect {
    margin-top: 20px;
  }

  .el-form {
    margin: 5px;
  }

  .citySelectQi {
    width: 100px;
  }

  .el-alert {
    margin-bottom: 15px;
  }
}

.tixing {
  float: left;
  width: 25%;
  padding: 10px;
}
.guanbi {
  text-align: right;
}
.radioss {
  display: block;
  padding: 8px 0px;
}
.el-checkbox {
  display: block;
  padding: 8px 0px;
}
.audit {
  margin-bottom: 18px;
}
.guanbiAudit {
  text-align: right;
}

.el-row {
  margin-bottom: -15px;
  margin-top: 15px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #ffff;
}
.bg-purple {
  background: #ffff;
}
.bg-purple-light {
  background: #ffff;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #ffff;
}

.xuekeqi {
  padding-left: 28px;
}
.nanduqi {
  padding-left: 28px;
}
.timubeizhu {
  width: 199.89px;
}
.btnSeaCle {
  padding-left: 130px;
}
.el-pagination {
  margin-top: 20px;
  text-align: right;
}
</style>

